<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>1</h2>
    <button>点我</button>
</body>
<script>
    let h2=document.querySelector('h2')
    let btn=document.querySelector('button')
    let obj={count:1}
    let num=obj.count//使用 num 变量缓存初始值，避免在getter中直接访问 obj.count 导致递归调用
    //当数据变化时，此函数会被触发，更新DOM中显示的count值，实现视图同步。
    function observer(val){//观察者，内包含所有观察者的更新方法
        //找出页面上所有用到count的dom结构----订阅者
        //将订阅者的count值进行更新
        h2.innerHTML=val
    }
    Object.defineProperty(obj,'count',{//劫持函数
        get(){//当读取 obj.count 时调用，返回缓存的 num 值
            return num
        },
        set(val){//当修改 obj.count 时调用，触发 observer 函数更新视图，并更新缓存的 num 值
            observer(val)
            num=val
        }
    })
    btn.addEventListener('click',function(){
        obj.count++
    })


</script>
</html>